import React, {Component} from 'react';
import {Grid, Tree, Checkbox} from '@icedesign/base';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;
const { Node: TreeNode } = Tree;
/**
*  菜单授权
*/
export default class AuthMenuTree extends Component{
  constructor(props) {
     super(props);
     this.state = {
       checkedKeys: [],
       autoExpandParent: true,
       data:[]
     }
     this.handleCheck = this.handleCheck.bind(this);
  }

  handleCheck(keys, info) {
    console.log(info);
    this.setState({
      checkedKeys: keys
    });
    if(this.props.handleCheck != undefined){
      this.props.handleCheck(keys.join(","),info.halfCheckedKeys.join(","));
    }
  }


  //初始化
  componentWillMount(){
    let checkedKeys = this.props.checkedKeys != undefined?this.props.checkedKeys.split(","):[];
    //获取菜单信息
    this.setState({
      data:API.getMenuTreeData().result,
      checkedKeys:checkedKeys
    });
  }

  render(){
    const loop = data =>
      data.map(item => {
        return (
          <TreeNode label={item.name} key={item.id+""}>
            {item.children && loop(item.children)}
          </TreeNode>
        );
      });
    return(
      <div style={{
        margin:'10px 0 10px 50px'
      }}>
        <Tree
          checkable={true}
          checkStrictly={false}
          defaultExpandedKeys={this.state.checkedKeys}
          checkedKeys={this.state.checkedKeys}
          onCheck={this.handleCheck}
          defaultExpandAll
        >
          {loop(this.state.data)}
        </Tree>
      </div>
    )
  }
}
